<template>
    <el-row class="border-radius">
        <el-form :inline="true" :model="queryForm" class="query-form" v-permission="['org.list']" @submit.enter.prevent>
            <el-form-item :label="$t('data.search.label.keyword')">
                <el-input v-model="queryForm.name" :placeholder="$t('data.search.placeholder.keyword')"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="queryData">{{$t('data.button.search')}}</el-button>
            </el-form-item>
        </el-form>
    </el-row>
    <div class="border-radius mt4">
        <el-row class="operate" v-permission="['org.add','org.del']">
            <el-button type="success" @click="showAddDialog" v-permission="['org.add']">{{$t('data.button.add')}}</el-button>
            <el-button type="danger" @click="deleteConfirm" v-permission="['org.del']" :disabled="selectData.length==0">{{$t('data.button.delete')}}</el-button>
            <el-alert :title="$t('data.tip.selected',{count:selectData.length})" type="warning" show-icon :closable='false' v-if="selectData.length>0"></el-alert>
        </el-row>
    
        <el-table :data="tableData" border row-key="organizationId" :tree-props="{ children: 'children', hasChildren: 'hasChildrens' }" 
            @selection-change="handleSelectionChange" v-loading="loading" v-permission="['org.list']">
            <el-table-column type="selection" width="55" v-permission="['org.del']"/>
            <el-table-column :label="$t('org.organizationName')">                
                <template #default="scope">
                    <el-icon v-if="scope.row.children.length==0 && scope.row.hasChildren"><arrow-down /></el-icon>
                    {{scope.row.organizationName}}
                </template>
            </el-table-column>
            <el-table-column prop="organizationOrder" :label="$t('org.organizationOrder')"/>
            <el-table-column fixed="right" :label="$t('data.column.operate')" v-permission="['org.edit']">
                <template #default="scope">
                    <el-button type="text" @click="showEditDialog(scope.row)" v-permission="['org.edit']">{{$t('data.button.edit')}}</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <add-org :form="dialogForm" :add="isAddDialog" :organizationOptions="organizationOptions" :visible="showDialog" @submit="addOrUpdateOrg" @close="closeAddDialog"/>
</template>
<script>
import orgApi from '@/api/organization'
import AddOrg from './AddOrg.vue'
export default{
    components:{
        AddOrg
    },
    data(){
        return {
            queryForm:{
            },
            tableData:[],
            selectData:[],
            showDialog:false,
            isAddDialog:false,
            dialogForm:{},
            loading:false,
            organizationOptions:[],
        }
    },
    mounted(){
        this.getTableList()
    },
    watch:{
    },
    methods:{
        queryData(){
            this.getTableList();
        },
        handleSelectionChange(data){
            console.log('handleSelectionChange',data)
            this.selectData=data;
        },
        getTableList(){
            console.log('queryTable',this.queryForm)
            this.loading=true
            orgApi.getOrganizationTree(this.queryForm).then(d=>{
                this.loading=false
                console.log(d)
                if(!!d && d.code=='200'){
                    this.tableData=d.data || []
                    this.organizationOptions=d.data || []
                }
            }).catch(()=>this.loading=false)
        },
        showAddDialog(){
            this.showDialog=true;
            this.isAddDialog=true;
            this.dialogForm={organizationOrder:0}
        },
        closeAddDialog(){
            this.showDialog=false;
            this.dialogForm={}
        },
        addOrUpdateOrg(form){
            if(this.isAddDialog){
                orgApi.addOrganization(form).then(d=>{
                    if(!!d && d.code=='200'){
                        this.$message({
                            showClose: true,
                            message: this.$t('data.result.addSuccess'),
                            type: 'success',
                        })
                        this.closeAddDialog();
                        this.getTableList();
                    }
                })
            }
            else{
                orgApi.updateOrganization(form).then(d=>{
                    if(!!d && d.code=='200'){
                        this.$message({
                            showClose: true,
                            message: this.$t('data.result.updateSuccess'),
                            type: 'success',
                        })
                        this.closeAddDialog();
                        this.getTableList();
                    }
                })
            }
        },
        showEditDialog(row){
            this.dialogForm={}
            orgApi.getOrganization(row.organizationId).then(d=>{
                if(!!d && d.code=='200'){
                    this.dialogForm=d.data || {}
                    this.isAddDialog=false;
                    this.showDialog=true;                    
                }
                else{
                    this.$message({
                        showClose: true,
                        message: this.$t('data.list.error'),
                        type: 'error',
                    })
                }
            })
        },
        deleteConfirm(){
            this.$messageBox.confirm(this.$t('data.confirm.deleteTreeNode'),this.$t('data.confirm.title'),{
                type: 'warning',
            })
            .then(() => {
                orgApi.deleteOrganizations(this.selectData.map(a=>a.organizationId)).then(d=>{
                    if(!!d && d.code=='200'){
                        this.$message({
                            showClose: true,
                            message: this.$t('data.result.deleteSuccess'),
                            type: 'success',
                        })
                        this.queryData();
                    }
                })
            })            
        },
    }
}
</script>
